/*导航栏*/
#header.tip-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0.02rem 0.2rem 0 rgb(101, 151, 237);
    width: 100%;
    height: 1rem;
    /* 更合理的高度 */
    display: flex;
    /* 方便内部元素布局 */
    flex-direction: row;
    justify-content: center;
}

.area {
    width: 90%;
    max-width: 14.5rem;
    height: auto;
    /*防止内容在宽屏上过度拉伸*/
    display: flex;
    margin-left: auto;
    margin-right: auto;
    /* 让元素在父容器中居中 */
    justify-content: space-between;
    align-items: center;
    /*将子元素沿主轴（默认水平方向）均匀分布*/
    position: relative;
    /*为子元素的绝对定位提供基准*/
}

.fixed_header .logo-box,
.fixed_header .nav-box,
.fixed_header .tel-box {
    display: flex;
}

.tip-box .logo-box a {
    display: block;
    /*标签从行内元素转为块级元素*/
    width: 2rem;
    height: auto;
    cursor: pointer;
}

.tip-box a:hover img {
    /*伪类  悬停设置*/
    transform: scale(1.1);
    /* 悬停时放大1.1倍 */
    transition: transform 0.3s ease;
    /* 为 transform 属性添加平滑过渡动画 */
}




/*定义了导航栏中右侧菜单区域（.nav-box）的布局规则，
主要功能是将导航菜单定位到右侧，并控制其尺寸和间距*/

/*首页  猎头服务  外包派遣  管理咨询  成功案例  猎头咨询*/

.tip-box .nav-box {
    /*margin-left: 2%;
    margin-right: auto;*/
    height: 1rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.tip-box .nav-box .nav {
    list-style-type: none;
    /*列表样式*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    /*确保 .nav 元素的高度撑满父容器*/
    gap: 0.3rem;
    ;
}

/*导航右侧菜单的垂直居中和水平均匀分布*/


.tip-box .nav-box .nav .nav-item {
    height: 100%;
    text-align: center;
    position: relative;
    white-space: nowrap;
    /*强制文本在一行内显示，不换行。
    即使文本内容超出元素的宽度，也不会自动换行，
    而是会溢出到元素外部。*/
    width: auto;
    /* 自动宽度 */
    min-width: 1.2rem;
    /* 最小宽度，防止过窄 */
}

/*单个菜单项（.nav-item）的样式规则，
主要控制菜单项的尺寸、对齐方式和定位。*/

.tip-box .nav-box .nav .nav-item .nav-link {
    display: block;
    /*将链接转换为块级元素，使其宽度自动撑满父容器*/
    font-size: 0.22rem;
    font-family: "Microsoft YaHei", sans-serif;
    font-weight: 400;
    color: #393939;
    line-height: 1rem;
    /*：当 line-height 等于元素高度时，单行文本会自动垂直居中*/
}

/*定义了导航栏中菜单项链接（.nav-link）的具体样式，*/

.tip-box .nav-box .nav .nav-link::after {
    content: "";
    display: block;
    /*块级元素的特性是 “独占一行”*/
    height: 0.03rem;
    background: #dd2c17;
    border-radius: 0.01rem;
    /*下划线圆角，使其边缘更柔和*/
    opacity: 0;
    /*下划线完全透明，不可见*/
    width: 0;
    /*下划线宽度为 0，不占据空间。*/
    position: absolute;
    /*脱离文档流*/
    left: 10%;
    bottom: .1rem;
    /*下划线距离 .nav-item 底部 0.1rem*/
    /*脱离文档流后，精准定位到元素底部的固定位置*/
    transition: all 0.3s ease;
    /* 增加过渡，让动画更流畅 */
    z-index: 10002;
}

/*使用 伪元素（::after） 为导航栏菜单项创建了一个下划线动画效果，
默认隐藏，在交互时（如悬停）显示。*/

.tip-box .nav-box .nav .nav-link:hover::after {
    width: 80%;
    /* 下划线展开宽度由0到70%，也可以按需调整 */
    opacity: 1;
    /* 显示下划线 */
    transition: all 0.3s ease;
    /* 动画过渡，让展开更丝滑 */
}

.tip-box .nav-box .nav .nav-item .hot {
    width: .26rem;
    height: .16rem;
    position: absolute;
    /*脱离文档流*/
    top: .18rem;
    right: -.08rem;
    /*右上角的效果*/
}

.tip-box .nav-box .nav .sub-box {
    position: absolute;
    width: 215%;
    /*宽度为其 “定位参考父元素” 宽度的 215%*/
    background: rgba(254, 253, 255, 0.8);
    padding: .25rem .15rem;
    top: .92rem;
    display: none;
    /*默认隐藏子菜单*/
    text-align: center;
    left: 50%;
    /*先偏移到中线*/
    margin-left: -107.5%;
    /*取 -107.5% 让子菜单整体居中*/
    /*“先偏移到中线，再拉回自身一半” 的方式，
    让子元素相对于父元素的中线对称，实现水平居中。*/
    z-index: 10001;
}

/*控制导航栏菜单项下方的子菜单（或下拉内容）的外观和位置*/

.tip-box .nav-box .nav .nav-item:hover .sub-box {
    display: block;
    /*悬停显示*/
}

.tip-box .nav-box .nav .sub-box a {
    font-size: .14rem;
    /*字体大小*/
    padding: .06rem .05rem;
    /*内边距*/
    display: block;
    /*块级*/
}

/*悬停改变颜色*/
.tip-box .nav-box .nav .nav-item .sub-box a:hover {
    color: #dd2c17;
}

.tip-box .tel-box .nav {
    display: flex;
    align-items: center;
}

/*电话相关导航区域*/

.tip-box .tel-box .nav .nav-item {
    display: flex;
    align-items: center;
    font-size: 0.16rem;
    font-family: Microsoft YaHei, sans-serif;
    font-weight: 400;
    color: #393939;
    line-height: 0.38rem;
    /*设置行高，让文字在垂直方向有合适的间*/
    margin-right: 0.2rem;
    /*给每个 .nav-item 右侧设置 0.2rem 的外边距*/
}

.tip-box .tel-box .nav .nav-item .wx {
    width: 30px;
    /*固定微信图标的宽度为 24px*/
    height: auto;
    margin-right: 0.1rem;
}

.u-img img {
    display: block;
    width: 100%;
    /*图片宽度撑满父容器*/
    height: auto;
    /*高度自适应，保持原始宽高比，防止图片变形*/
    object-fit: cover;
    /*当图片宽高比与父容器不一致时，裁剪图片并居中显示*/
    object-position: center;
}

.tel-box .nav .nav-item .erwei {
    width: 1.56rem;
    height: 1.95rem;
    /*二维码悬浮层的宽和高*/
    transition: all 0.3s;
    /*为悬浮层添加过渡动画*/
    border: 0.01rem solid #6e6e6e;
    /*给悬浮层设置灰色细边框*/
    border-radius: 0.15rem;
    /*圆角*/
    position: absolute;
    top: -2rem;
    /*“向上偏移、超出可视区域隐藏”*/
    z-index: 100;
    /*确保它显示在其他元素（如导航栏文字、图标）的上方*/
    box-shadow: 0 0 0.13rem .05rem rgba(95, 95, 95, 0.25);
    overflow: hidden;
    /*隐藏悬浮层超出内容框的部分*/
}

.tel-box .nav .nav-item:hover .erwei {
    top: 0.9rem;
    /* 从 -2rem 移动到可见位置 */
}

/*微信二维码四周是透明的，所以看起来好像没有占满父元素*/
.tel-box .nav .nav-item .erwei img {
    display: block;
    width: 100%;
    height: auto;
}

.tel-box .nav .erwei .text {
    background: linear-gradient(115deg, #ff7200, #ff4200, #cd281f);
    /*从左到右倾斜 115° 的线性渐变背景*/
    font-size: 0.16rem;
    font-family: SourceHanSansCN, serif;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.4rem;
    /* 垂直居中 */
    text-align: center;
    /* 水平居中 */
}

.tip-box .tel-box .nav .nav-item .dh {
    width: 30px;
    margin-right: 0.1rem;
}